<template>
	<view class="tab-bar">
		<view v-for="(item, index) in bottomNav" :key="index" 
			:class="[item.isMiddle ? 'tab-item-middle' : 'tab-item']" 
			@click="handleTabClick(item.path)">
			<!-- 中间按钮 -->
			<view v-if="item.isMiddle" 
				:style="{ backgroundColor: current === item.path ? '#044bad' : '#333' }"
				class="tab-item-middle">
				<image class="tab-icon-middle"
					:src="current === item.path ? item.selectIcon : item.noSelectIcon" 
					mode="widthFix"></image>
			</view>
			<!-- 其他按钮 -->
			<view v-else>
				<image :class="item.isMiddle ? 'tab-icon-middle' : 'tab-icon'"
					:src="current === item.path ? item.selectIcon : item.noSelectIcon" 
					mode="widthFix"></image>
				<text class="tab-text" :class="{ 'active': current === item.path }">{{ item.selectWord }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { routerGuard } from '@/config/RouteGuard.js';

	const current = ref('/pages/mian/index');

	const bottomNav = ref([
		{
			path: '/pages/home/index',
			selectIcon: '../static/bar/isselecthome.png',
			selectId: 1,
			selectWord: '首页',
			noSelectIcon: '../static/bar/isnoselectHome.png',
			isMiddle: false,
		},
		{
			path: '/pages/community/index',
			selectIcon: '../static/bar/isSelectFr.png',
			selectId: 2,
			selectWord: '图库',
			noSelectIcon: '../static/bar/isNoSelectFr.png',
			isMiddle: false,
		},
		{
			path: '/pages/mian/index',
			selectId: 3,
			selectIcon: '../static/bar/plane.png',
			noSelectIcon: '../static/bar/plane.png',
			isMiddle: true,
		},
		{
			path: '/pages/equip/index',
			selectIcon: '../static/bar/isSelectZh.png',
			selectId: 4,
			selectWord: '装备',
			noSelectIcon: '../static/bar/isNoSelect.png',
			isMiddle: false,
		},
		{
			path: '/pages/myself/index',
			selectIcon: '../static/bar/isSeletMy.png',
			selectId: 5,
			selectWord: '我的',
			noSelectIcon: '../static/bar/isNoSelectMy.png',
			isMiddle: false,
		}
	]);

	// 检查是否需要拦截页面
	const handleTabClick = (url) => {
		if (url === '/pages/myself/index') {
			routerGuard(url);
		} else {
			switchTab(url);
		}
	};

	// tab切换
	const switchTab = (url) => {
		uni.switchTab({
			url
		});
		current.value = url;
	};

	// 每次页面显示时，更新当前选中的 tab
	onShow(() => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		current.value = '/' + currentPage.route;
	});
</script>

<style scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eaeaea;
		box-shadow: 0px 6rpx 20rpx rgba(0, 0, 0, 0.5);
		z-index: 998;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.tab-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	.tab-text {
		display: block;
		font-size: 22rpx;
		color: #8a8a8a;
		text-align: center;
	}

	.active {
		color: #044bad;
	}

	.tab-item-middle {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab-icon-middle {
		width: 48rpx;
		height: 48rpx;
	}
</style>